<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>$attrs多个根元素使用class类</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#app {
			padding: 50px;
		}
		.red {
			margin-bottom: 10px;
			color: red;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div id="app">
		<my-component :class="['red']"></my-component>
		

	</div>
	<script src="../lib/vue.3.4.js"></script>
	<script>
		var app = Vue.createApp({
			data () {
				return {

				}
			}
		})

		app.component('my-component', {
			template: `
				<h2 :class="$attrs.class">这是一个标题</h2>
				<p>这是一个段落</p>
			`,
		})

		app.mount('#app');
	</script>
</body>	
</html>